<template>
	<div class="contextmenu" v-show="visible" @click.stop>
		<ul>
			<li @click="removeItem">删除</li>
		</ul>
	</div>
</template>

<script lang="ts">
import emitter from '@/libs/eventbus'
import { defineComponent, onBeforeUnmount } from 'vue'

export default defineComponent({
	name: 'actionMenu',
	props: {
		visible: {
			type: Boolean,
			default: false
		}
	},
	setup(props, context) {
		const hide = () => {
			context.emit('update:visible', false)
		}
		window.addEventListener('click', hide)
		onBeforeUnmount(() => {
			window.removeEventListener('click', hide)
		})
		const removeItem = () => {
			context.emit('remove', item)
			hide()
		}
		let item: any = {}
		emitter.on('setMenuInfo', (info) => (item = info))
		return { removeItem }
	}
})
</script>

<style lang="less" scoped>
.contextmenu {
	width: 230px;
	padding: 10px 0;
	border-radius: 4px;
	background-color: #fff;
	box-shadow: 0 0 4px 4px #ccc;
	ul {
		li {
			padding: 8px 16px;
			margin-bottom: 4px;
			&:active {
				background-color: #f6f6f6;
			}
		}
	}
}
</style>
